<template>
	<view class="print-container">
		<nav-bar :title="title"></nav-bar>
		<view style="padding-bottom: 80px;">
			<view class="content">
				<view class="txt"><span class="zj">选择绘本</span></view>
				<view class="select_x">
					<view class="txt1">选择绘本</view>
					<picker class="rg_fd" @change="bindPickerChange" :value="index" :range="bookList"
						range-key="folder_name">
						<view v-if="bookList[index]" class="uni-input">{{bookList[index].folder_name}}</view>
					</picker>
				</view>
				<view class="select_x">
					<view class="txt1">打印册数</view>
					<view class="rg_fd">
						<view class="add_r">
							<view class="jian" @tap="jian">-</view>
							<input class="ip_sr" v-model="bookCount" type="number" maxlength="11" placeholder="0" />
							<view class="add" @tap="add">+</view>
						</view>
					</view>
				</view>
				<view class="select_x">
					<view class="txt1">选择省市区</view>
					<view class="rg_fd" type="default" @click="chooseAddr">
						<view class="uni-input">{{pickerText||"请选择省市区"}}</view>
					</view>
				</view>
				<view class="select_x">
					<view class="txt1">详情地址</view>
					<textarea class="wb_txt" placeholder="请输入详情地址" v-model="addr"></textarea>
				</view>
			</view>
			<view class="content1">
				<view class="txt"><span class="zj">选择支付方式</span></view>
				<radio-group @change="radioChange">
					<view class="select_x">
						<image src="../static/zx_zf1.png" mode="widthFix" class="zx_zf1"></image>
						<view class="txt3">微信支付</view>
						<radio value="1" color="#33cc00" class="xz_zt" />
					</view>
					<view class="select_x">
						<image src="../static/zx_zf2.png" mode="widthFix" class="zx_zf1"></image>
						<view class="txt3">支付宝支付</view>
						<radio value="2" color="#33cc00" class="xz_zt" />
					</view>
				</radio-group>
			</view>
		</view>
		<n-address class="add-pop" ref="addr" @up-data="upData" :fValue="fValue" :fStyles="fStyles"></n-address>
		<!-- 支付按钮 -->
		<view class="footer">
			<view class="zf_txt">
				<view>需支付:￥{{ totalPrice }}元</view>
				<view>每册<span class="q_price">{{ singleCount }}元</span> 邮费<span
						class="q_price">{{ postage_money }}元</span></view>
			</view>
			<view @click="payFn" class="th_btn">去支付</view>
		</view>
	</view>
</template>

<script>
	import NavBar from "components/NavBar";
	import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
	export default {
		components: {
			NavBar,
			levelLinkage
		},
		data() {
			return {
				title: "打印绘本",
				// 当前选择的绘本
				currentBook: "请选择绘本",
				pickerShow: false,
				bookList: [],
				bookCount: "",
				singleCount: 0,
				array: [1, 2, 3],
				index: 0,
				bookCount: 1,
				"value": [
					3,
					3,
					0
				],
				"provinceCode": "140000",
				"cityCode": "140400",
				"districtCode": "140403",
				"region": "山西省-长治市-潞州区",
				"regionArr": [
					"山西省",
					"长治市",
					"潞州区"
				],
				pickerText: "",
				addr: null,
				// 邮费
				postage_money: 0,
				err: '',
				payType: ''
			};
		},
		props: {
			fValue: {
				type: Array,
				default () {
					return [0, 0, 0]
				}
			},
			fStyles: {
				type: Object,
				default () {
					return {
						canceltext: '取消',
						confirmText: '确定',
						cancelColor: '#584f54',
						confirmColor: '#32f06b',
						lineBgColor: 'rgba(50,240,107,.1)',
						lineBorColor: '#23a249',
						columnFontSize: '28rpx'
					}
				}
			}
		},
		computed: {
			totalPrice() {
				return this.bookCount * this.singleCount + this.postage_money;
			},
		},
		mounted() {
			this.fetch()
		},
		methods: {
			fetch() {
				this.$u.post('print_show', {}).then(res => {
					this.bookList = res.data.books_info;
					this.postage_money = parseFloat(res.data.postage_money)
					this.singleCount = parseFloat(this.bookList[0].books_money)
				})
			},

			verify() {
				if (!this.pickerText) {
					this.err = "请选择地区"
					return false
				}
				if (!this.addr) {
					this.err = "请输入详细地址"
					return false
				}
				if (!this.payType) {
					this.err = "请选择支付方式"
					return false
				}
				return true
			},

			payFn() {
				if (!this.verify()) {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: this.err,
					});
					return
				}
        console.log('----------------')
				this.$u.post('create_print_order', {
					folder_id: this.bookList[this.index].id,
					print_num: this.bookCount,
					mailing_address: this.pickerText + this.addr
				}).then(res => {
          console.log('res: ------------', res)
					let orderInfo;
					if (this.payType == 1) {
						// 微信支付
						orderInfo = res.data.bridge
					} else if (this.payType == 2) {
						// 支付宝
						orderInfo = JSON.stringify(res.data.bridge)
					}
          console.log('orderInfo:-----------', orderInfo)
					uni.requestPayment({
						provider: this.payType == 1 ? 'wxpay' : this.payType == 2 ? 'alipay' : '',
						orderInfo: orderInfo,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: "支付成功",
								icon: "success"
							})
							setTimeout(function() {
								uni.navigateBack({

								})
							}, 1500);
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));

						}
					});
				}).catch(e => {
          console.log(e)
        })
			},

			radioChange: function(evt) {
				this.payType = evt.detail.value;
				if (evt.detail.value == 1) {

				} else {

				}
			},
			chooseAddr() {
				this.$refs['addr'].popUp()
			},
			upData(e) {
				this.pickerText = e.region
			},
			jian() {
				this.bookCount--;
				if (this.bookCount == 0) {
					this.bookCount = 1
				}
			},
			add() {
				this.bookCount++;
			},
			// 显示picker
			handleShowPicker() {
				this.pickerShow = true;
			},
			// 选择绘本
			handleChooseBook(e) {
				this.currentBook = this.bookList[e[0]];
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.singleCount = parseFloat(this.bookList[this.index].books_money)
			},
		},
	};
</script>

<style scoped>
	.main {
		bottom: 55px !important;
	}

	/deep/.add-pop .main {
		z-index: 999;
	}

	.th_btn {
		width: 30%;
		height: 40px;
		display: table;
		float: right;
		border-radius: 50px;
		font-size: 16px;
		color: #fff;
		line-height: 40px;
		margin-top: 2.5px;
		background-color: #33cc00;
		text-align: center;
	}

	.zf_txt>view:nth-child(1) {
		width: 100%;
		height: 22px;
		display: table;
		font-size: 15px;
		color: #33cc00;
		line-height: 22px;
	}

	.zf_txt>view:nth-child(2) {
		width: 100%;
		height: 22px;
		display: table;
		font-size: 15px;
		color: #000;
		line-height: 22px;
	}

	.q_price {
		color: #33cc00;
	}

	.zf_txt {
		width: 65%;
		height: 45px;
		display: table;
		float: left;
	}

	.footer {
		width: 100%;
		height: 70px;
		display: table;
		background-color: #fff;
		position: fixed;
		left: 0px;
		bottom: 0px;
		border-top: 0.5px solid #ededed;
		box-sizing: border-box;
		padding: 11.5px 4%;
		z-index: 1;
	}

	.xz_zt {
		width: auto;
		height: auto;
		display: table;
		float: right;
		margin-top: 10.5px;
		margin-bottom: 10.5px;
	}

	.txt3 {
		width: auto;
		height: 24px;
		display: table;
		float: left;
		font-size: 15px;
		color: #000000;
		line-height: 24px;
		margin-top: 10.5px;
		margin-bottom: 10.5px;
	}

	.zx_zf1 {
		width: 24px;
		height: 24px;
		display: table;
		float: left;
		margin-right: 10px;
		margin-top: 10.5px;
		margin-bottom: 10.5px;
	}

	.content1 {
		width: 100%;
		height: auto;
		display: table;
		background-color: #fff;
		margin-top: 10px;
	}

	page {
		background-color: #fdfdf0;
	}

	.wb_txt {
		width: 100%;
		height: 70px;
		display: table;
		font-size: 13px;
		color: #000000;
		line-height: 22px;
		box-sizing: border-box;
		padding: 5px 0px;
	}

	.ip_sr {
		width: 40px;
		height: 30px;
		display: inline-block;
		float: left;
		font-size: 14px;
		color: #000;
		text-align: center;
		box-shadow: 0px 0px 5px 0px #f6f6f6;
	}

	.jian {
		width: 30px;
		height: 30px;
		display: table;
		float: left;
		margin-right: 5px;
		font-size: 15px;
		color: #ffff;
		text-align: center;
		line-height: 28px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		background-color: #33cc00;
	}

	.add {
		width: 30px;
		height: 30px;
		display: table;
		float: left;
		margin-left: 5px;
		font-size: 15px;
		color: #ffff;
		text-align: center;
		line-height: 28px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		background-color: #33cc00;
	}

	.add_r {
		width: auto;
		height: 30px;
		display: table;
		float: right;
		margin-top: 7.5px;
	}

	.rg_fd {
		width: 75%;
		height: 45px;
		display: table;
		float: right;
	}

	.uni-input {
		width: 100%;
		height: 45px;
		display: table;
		font-size: 15px;
		color: #000000;
		line-height: 45px;
		box-sizing: border-box;
		padding-right: 20px;
		text-align: right;
		background: url(../static/rj_icon.jpg)no-repeat;
		background-size: 9px auto;
		background-position: right center;
	}

	.txt1 {
		width: 25%;
		height: 45px;
		display: table;
		float: left;
		font-size: 15px;
		color: #000000;
		line-height: 45px;
	}

	.select_x {
		width: 100%;
		box-sizing: border-box;
		padding: 0px 4%;
		height: auto;
		display: table;
		border-bottom: 0.5px solid #fdfdf0;
	}

	.zj {
		position: relative;
	}

	.txt {
		width: 100%;
		height: 40px;
		display: table;
		box-sizing: border-box;
		padding: 0px 4%;
		font-size: 18px;
		color: #000000;
		font-weight: bold;
		line-height: 40px;
		position: relative;
		padding-top: 5px;
		padding-bottom: 5px;
		border-bottom: 0.5px solid #fdfdf0;
	}

	.txt::before {
		content: "";
		width: 70px;
		height: 6px;
		border-radius: 50px;
		position: absolute;
		left: 4%;
		bottom: 12px;
		background: linear-gradient(to right, rgba(101, 220, 80, 1), rgba(183, 248, 160, 0.5));
	}

	.content {
		width: 100%;
		height: auto;
		display: table;
		background-color: #fff;
	}

	.print-body {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.print-msg {
		display: flex;
		width: 80%;
		margin-top: 80rpx;
	}

	.print-msg-title {
		width: 240rpx;
		margin-right: 40rpx;
		font-size: 36rpx;
	}

	.print-msg-input {
		width: 100%;
		box-sizing: border-box;
		border: 1px solid #999;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 4rpx 10rpx;
	}

	.print-msg-input textarea {
		width: 200rpx;
		height: 300rpx;
	}

	.print-order {
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin-top: 120rpx;
		font-size: 36rpx;
	}

	.print-order-total {
		color: red;
		margin-right: 10rpx;
	}

	.print-topay {
		height: 140rpx;
		width: 70%;
		text-align: center;
		line-height: 140rpx;
		background-color: rgb(157, 202, 136);
		box-shadow: 0 0 10rpx #999;
		font-size: 36rpx;
		border-radius: 30rpx;
		margin-top: 80rpx;
		font-weight: bold;
	}
</style>
